<template>
  <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
    <div class="card-img">
        <a @click="openImgInNewWindow">
            <img :src="img" alt="" style="height: 200px;">
        </a>
      <div v-if="editable && type == 'vertical'" class="control">
<!--        <span class="edit"  @click="openEditModal" >
            <i class="el-icon-edit"  ></i>
        </span>-->

        <span class="edit"  @click="addToFeature" >
            <i class="el-icon-star-on" title="添加到精选"></i>
        </span>
        <span class="delete"  @click="sureDelete" >
          <i class="el-icon-delete" title="删除" ></i>
        </span>
      </div>
    </div>
    <div class="card-desc panel-body" style="">
      <h5>{{ title }}</h5>
      <span :title="desc" >{{ this.getDesc() }}</span>
    </div>
  </div>
</template>
<style scoped lang="less" src="@/theme/components.less">
</style>
<script>
  export default {
    name: 'VmCard',
    props: {
      type: {
        type: String,
        default: 'vertical'
      },
      editable: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: 'Title'
      },
      img: {
        type: String,
        default: require('@/assets/img-1.jpg')
      },
      desc: {
        type: String,
        default: ''
      },
      detailUrl: {
        type: String,
        default: '#'
      },
      editUrl: {
        type: String,
        default: ' -1'
      },
       photoId: { type: Number, default: -1 },
        proId: {  type: Number,  default: -1 },
        rpath: { type: String, default: '#'  },
        rpath2: { type: String, default: '#'  },
    },
    data: function () {
      return {
        modalDelete: false
      }
    },
      methods: {
          addToFeature(){
              let vm = this;
              let args = {
                  photoId: vm.photoId,
                  proId: vm.proId,
                  path: vm.rpath,
                  path2: vm.rpath2,
                  desc: vm.desc,
              };
              console.log(args );
              vm.$http.post('photo/addToFeature', args  )
                  .then(function (response) {
                      if (response.data.result) {
                          vm.$message({ message: "操作成功",  type: 'success' });
                      }
                  }).catch(function (error) {
                  console.log(error)
              });
          },
          sureDelete(   ){
              let vm = this;
              vm.$confirm(vm.$t('IsDelete'), vm.$t('Tip'), {
                  confirmButtonText: vm.$t('Confirm'),
                  cancelButtonText: vm.$t('Cancel'),
                  type: 'warning'
              }).then(() => {
                  vm.doDelete(  );
              });
          },
          doDelete(   ){
              let vm = this;
              let args = {
                  photoId: vm.photoId,
                  proId: vm.proId,
              };
              vm.$http.get('photo/delAPhotoFromProject', {params: args})
                  .then(function (response) {
                      if (response.data.result) {
                          vm.deleteOk();
                      }
                  }).catch(function (error) {
                  console.log(error)
              });
          },
          deleteOk: function () {
              this.$emit('delete-ok')
          },
          openImgInNewWindow: function () {
              window.open(this.detailUrl) ;
          },
          openEditModal: function () {
             console.log("openEditModal ");
          },
          getDesc: function () {
              if( this.desc.length < 44 ){
                  return this.desc;
              }else {
                  return this.desc.substring(0 , 40 ) + "...";
              }
          },
      }
  }
</script>
